import { template } from "handlebars";

// import { template } from "handlebars";

$(function() {
    /**
     * 拿到 搜索页面传递过来的关键字的值
     * 根据这个关键字的值进行ajax
     * 传递请求的参数 最少需要三个
     * 1 page 是第几页
     * 2 pageSize是每页的条数
     * 3 传递关键字的值
     * 
     * 成功了把数据展示在页面上
     */


     // 1 拿到搜索页面传递过来的关键字的值
     var url=window.location.href;
     var index=url.indexOf('?');
     var len=url.substring(index+1);
     var arr=len.split('=');

     var pages=1;
     var pageSize=4;
     var keys=arr[1];
     var htmls='';
     var priceNum=1; // 价格排序
     var that=null;
     var lengNum=1; // 销量排序

     /**
      * 1 找到加载的区域或者叫容器 refreshContainer==html页面的具体地方
      * 2 mui.init 会默认执行一次 第二次的时候pages需要加加
      * 3 加载完毕后 是否还有更多数据的时候 this的指向 that.endPullupToRefresh(false)
      * 4 htmls+=template('tmp',res); 当前页的数据跟之前的数据一起加起来 然后再一起展示
      * 5 判断 if(res.data.length>0) 是否后面还有没有更多数据 如果没有就不需要再进行ajax
      * 
      * 
      */
    // var refreshContainer=document.querySelector('refreshContainer');

    mui.init({
        pullRefresh: {
            container: '#refreshContainer',//待刷新区域表示,querySelector能定位的css选择器均可,比如: id,.class等
            up: {
                height: 80, // 可选,默认50,触发上拉加载拖动距离
                auto: true, // 可选,默认false,自动上拉加载一次
                contentrefresh: "我的乐淘正在加载...",// 可选,正在加载状态时,上拉加载控件上显示的标题内容
                contentnomore: "我的乐淘没有更多数据了",// 可选,请求完毕若没有更多数据时显示的提醒内容
                callback: getData // 必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据
            }
        }
    });

    /**
     * 1 价格排序 默认的情况是随机派 还是从小到大排??
     * 1.1 默认情况下我们给1 进行升序
     * 2 给按钮绑定点击事件
     * 3 把之前的商品进行清空,然后排序好的所有的商品进行重新展示(从高到低或者事从低到高)
     * 
     * priceSort
     */

     $('#priceSort').on('tap',function() {
        //  if(priceNum==1) { // 是升序
        //      priceNum=2;
        //  } else {
        //      priceNum=1;
        //  }
        priceNum=priceNum==1?2:1; // 三元表达式
        console.log(priceNum);
        lengNum=''; /* 如果是价格排序那么就把销量的值重置为空*/
        htmls=''; // htmls 也需要清空
        pages=1; // pages也需要重置 从第一页开始
        getData();
        mui('#refreshContainer').pullRefresh().refresh(true);
        // id 名字也需要改成我们自己的
     })

     /**
      * 销量排序
      */

      $('#lengNum').on('tap',function() {
          lengNum=lengNum==1?2:1; // 三元表达式
          console.log(lengNum);
          priceNum='';
          /** 如果是销量排序 那么就把价格的值重置为空 因为价格跟销量会冲突 */
          htmls='';              // htmls 也需要清空
          $('#ulBox').html('');  // 内容也需要清空
          pages=1;               // pages也需要重置 从第一页开始
          getData();
          mui('#refreshContainer').pullRefresh().refresh(true);
          // id 名字也需要改成我们自己的id
      })

      function getData() {
          if(!that) {
              that=this;   // mui
          }
          $.ajax({
              url: '/product/queryProduct',
              type: 'get',
              data: {
                  page: pages++,
                  pageSize: pageSize,
                  key: keys,
                  price: priceNum, // 价格排序
                  num: lengNum     // 销量排序
              },
              success: function(res) {
                  /**
                   * 如果加载第二页甚至后面更多的页数的数据的时候,应该是
                   * 要把之前所有的数据一起加起来,然后再进行展示
                   */

                   /**
                    * 判断你下拉加载的时候如果没有更多的数据那么就不再进行加载更多
                    * 而是提示'没有更多数据了'
                    */

                    if(res.data.length>0) {
                        htmls+=template('tmp',res);
                        $('#ulBox').html(htmls);
                        /**
                          * 注意:
                         * 1. 加载完新数据后,必须执行如下代码,true表示没有更多数据了;
                         * 2. 若为ajax请求,则需要将如下代码放置在处理完ajax响应数据之后
                         */
                        that.endPullupToRefresh(false); // false 表示还有更多数据
                    } else {
                        that.endPullupToRefresh(true);
                    }
              }
          })
      }





      $('#vcode').on('tap',function() {
          $.ajax({
              url: '/user/vCode',
              type: 'get',
              success:function(res) {
                  reCode=res.vCode;
              }
          })
      })

      $('#regBtn').on('tap',function() {
          /**
           * 1 拿到所有的值
           */

           var userName=$('#userName').val();
           var userPhone=$('#userPhone').val();
           var userPwd=$('#userPwd').val();
           var usercofirmPwd=$('#usercofirmPwd').val();
           var reCode=$('#reCode').val();

           if(!userName) {
               alert('手机号不能为空!');
               return;
           }
           if(!userPwd) {
               alert('密码不能为空!');
           }
           if(!usercofirmPwd) {
               alert('确认密码不能为空!');
               return;
           }
           if(userPwd!==usercofirmPwd) {
               alert('两次输入的密码不一致!');
               return;
           }
           if(!reCode) {
               alert('验证码不能为空!');
               return;
           }

           $.ajax({
               url: '/user/register',
               type: 'post',
               data: {
                   username: userName,
                   password: userPwd,
                   mobile: userPhone,
                   vCode: reCode
               },
               success: function(res) {
                   /**
                    * res可能返回两种情况
                    * 一种是成功
                    * 一种是失败
                    */

                    if(res.success) {
                        mui.toast('注册成功');
                        // 成功之后跳转到登录页面
                        window.location.href='login.html';
                    }else {
                        $('#regBtn').html('注册');
                        mui.toast('注册失败,请重新进行注册');
                    }
               },
               error: function() {
                   $('#regBtn').html('注册');
               },
               beforeSend:function() {
                   $('#regBtn').html('正在提交注册');
               },
               complete:function() {
                   // 不管成功还是失败我都要执行
               }
           })
      })






      /**
       * 给搜索按钮绑定点击事件
       * 点击搜索按钮的时候拿到输入框里面的值
       * 判断输入框里面是否输入了值 如果没有输入就给出提示
       * 如果之前也没有存入值 那么久把这次的值存进去
       * 如果之前已经存过值了,那么需要先把之前的值取出来然后再跟
       * 这次的值一起再次存入进去
       * 如果有值 我们就把值进行本地缓存
       */

       // 1 给搜索按钮绑定点击事件
       $('#search').on('tap',function() {
           var arr=[];
           var val=$('#keyWord').val();
           if(val.length<=0) {
               alert('请输入关键字');
               return;
           }
           if(localStorage.getItem('keyWord')) {
               // 把之前的取出来
               arr=JSON.parse(localStorage.getItem('keyWord'));
               // 把输入的关键字跟之前的一起放到数组里面
               arr.push(val);
               // 把所有的再存入本地缓存
               localStorage.setItem('keyWord',JSON.stringify(arr));
           } else {
               // 判断如果之前没有 那么就把这次输入的关键字存入
               arr.push(val);
               localStorage.setItem('keyWord',JSON.stringify(arr));
           }

           // 跳转页面
           window.location.href='search-list.html?key='+val;
       })

       /**
        * 1 一进来 如果有搜索历史数据 那么应该展示历史数据
        */

        if(localStorage.getItem('keyWord')) {
            var vals=JSON.parse(localStorage.getItem('keyWord'));
            var obj={
                rows:vals
            }
            var htmls=template('oldData',obj);
            $('#ulBox').html(htmls);
        }

        $('#clearOld').on('tap',function() {
            localStorage.removeItem('keyWord');
            $('#keyWord').val('');
            $('#ulBox').html('');
        })






        /**
         * 1 拿到搜索页面传递过来的关键字的值
         * 2 根据这个关键字的值进行ajax
         * 3 传递请求的参数 最少需要三个
         *   1 page 是第几页
         *   2 pageSize 是每页的条数
         *   3 传递关键字的值
         * 4 成功了把数据展示在页面上
         */

         // 1 拿到 搜索页面传递过来的关键字的值
         var url=window.location.href;
         var index=url.indexOf('?');
         var len=url.substring(index+1);
         var arr=len.split('=');

         var pages=1;
         var pageSizes=4;
         var keys=arr[1];
         var htmls='';
         var priceNum=1; //价格排序
         var that=null;
         var lengNum=1; //销量排序


         /**
          * 1 找到加载的区域或者叫容器 refreshContainer==html页面的具体地方
          * 2 mui.init 会默认执行一次 第二次的时候pages需要加加
          * 3 加载完毕后 是否还有更多数据的时候 this的指向 that.endPullupToRefresh(false)
          * 4 htmls+=template('tmp',res); 当前页的数据要跟之前的数据一起加起来 然后再一起展示
          * 5 判断 if(res.data.length>0) 是否后面还有没有更多数据 如果没有就不需要再进行ajax
          * var refreshContainer = document.querySelector("refreshContainer");
          */

          mui.init({
              pullRefresh: {
                  container:'#refreshContainer', // 待刷新区域标识 querySelector能定位的css选择器均可,比如: id,.class等
                  up: {
                      height: 80, // 可选 默认50 触发上拉加载拖动距离
                      auto: true, // 可选 默认false,自动上拉加载一次
                      contentrefresh: '我的乐淘正在加载...', // 可选,正在加载状态时,上拉加载控件上显示的标题内容
                      contentnomore: '我的乐淘没有更多数据了', // 可选.请求完毕若没有更多数据时显示的提醒内容;
                      callback: getData // 必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
                  }
              }
          });


          /**
           * 1 价格排序 默认的情况是随机排 还是从小到大排??
           *  1.1 默认情况下我们给1 进行升序
           * 2 给按钮绑定点击事件
           * 3 把之前的商品进行清空,然后排序排好的所有的商品进行重新展示(从高到低或者是从低到高)
           * 
           * priceSort
           */


           $('#priceSort').on('tap',function() {
               priceNum=priceNum==1?2:1; // 三元表达式
               lengNum=''; // 如果是价格排序那么就把销量的值重置为空
               htmls=''; // htmls 也需要清空
               $('#ulBox').html(''); // 内容也需要清空 
               pages=1; // pages 也需要重置 从第一页开始
               getData();
               mui('#refreshContainer').pullRefresh().refresh(true);
               // id名字也需要改成我们自己的id
           })

           /**
            * 销量排序
            */

            $('#lengNum').on('tap',function() {
                lengNum=lengNum==1?2:1; // 三元表达式
                priceNum=''; // 清空价格排序
                htmls='';
                $('#ulBox').html('');
                pages=1;
                getData();
                mui('#refreshContainer').pullRefresh().refresh(true);
            })


            function getData() {
                if(!that) {
                    that=this; // mui
                }

                $.ajax({
                    url: '/product/queryProduct',
                    type: 'get',
                    data: {
                        page: pages++,
                        pageSize: pageSizes,
                        key:keys,
                        price:priceNum,
                        num: lengNum
                    },
                    success: function(res) {
                        /**
                         * 如果加载第二页甚至后面更多的页数的数据的时候,应该是
                         * 要把之前所有的数据一起加起来,然后再进行展示
                         */

                         /**
                          *  判断你下拉加载的时候如果没有数据那么就不再进行加载更多
                          * 而是提示'没有更多数据了'
                          */

                          if(res.data.length>0) {
                              htmls+=template('tmp',res);
                              $('#ulBox').html(htmls);

                              /**注意:
                               * 1 加载完新数据后,必须执行如下代码,true表示没有更多数据了;
                               * 2 若为ajax请求,则需要将如下代码放置在处理完ajax响应数据之后
                               */
                              that.endPullupToRefresh(false); // false 表示还有更多数据
                          } else {
                              that.endPullupToRefresh(true);
                          }

                    }
                })
            }

            /**
             * 1 获取验证码
             */

             var pwdCode='';
             $('#vcode').on('tap',function() {
                 $.ajax({
                     url: ' /user/vCodeForUpdatePassword',
                     type: 'get',
                     async: false, // 改为同步
                     success: function(res) {
                         pwdCode=res.vCode
                     }
                 })
             })

             /*
              * 1 给修密码绑定点击事件
              * 2 获取 新密码 旧密码 验证码的值
              * 3 判断 1 不能空
              *        2 值对不对
              * 4 发送ajax 如果成功了跳转到登录页面
              * 如果失败了就给个提示
              */

              $('#changePwdBtn').on('tap',function() {
                var oldPwd=$('#oldPwd').val();
                var newPwd=$('#newPwd').val();
                var confirmNewPwd=$('#confirmNewPwd').val();
                var reCode=$('#reCode').val();
  
                if(!oldPwd) {
                    nui.toast('原来的密码不能为空');
                    return;
                }
                if(!newPwd) {
                    mui.toast('新密码不能为空');
                    return;
                }
                if(!confirmNewPwd) {
                    mui.toast('新密码不能为空');
                    return;
                }
                if(newPwd!==confirmNewPwd) {
                    mui.toast('两次输入的密码不一致');
                    return;
                }
                if(!reCode) {
                    mui.toast('验证码不能为空');
                    return;
                }
                if(reCode !== pwdCode) {
                    mui.toast('验证码不正确');
                    return;
                }
  
                $.ajax({
                    url: '/user/updatePassword',
                    type: 'post',
                    data: {
                        oldPassword: oldPwd,
                        newPassword: newPwd,
                        vCode: reCode
                    },
                    success: function(res) {
                        mui.toast('修改密码成功');
  
                        if(res.success) {
                            setTimeout(function() {
                                location.href='login.html'
                            },2000)
                        }else {
                            $('#changePwdBtn').html('确认修改密码')
                            mui.toast('修改密码失败');
                        }
                    },
                    beforeSend: function() {
                        $('#changePwdBtn').html('正在修改密码')
                    }
                })
              })



            var url=window.location.href;
            var index=url.indexOf('?');
            var len=url.substring(index+1);
            var arr=len.split('=');
            var ids=arr[1];
            var kunum=0;
            var selectSize=-1;

            $.ajax({
                url:'/product/queryProductDetail',
                type:'get',
                data: {
                    id: ids
                },
                success:function(res) {
                    kunum=res.num;
                    var size=res.size;
                    var sizeArr=size.split('-');
                    var start=sizeArr[0];
                    var end=sizeArr[1];
                    var resArr=[];

                    for(var i=start;i<=end;i++) {
                        resArr.push(i);
                    }
                    // 重写size 把字符串变成数组
                    res.size=resArr;
                    var htmls=template('detailTmp',res);
                    $('#myDetail').html(htmls);
                }
            })

            // 注意事项 这里需要使用事件代理的方法进行绑定 因为是动态生成的数据

            $('#myDetail').on('tap','#reduce',function() {
                var val=parseInt('#productNum').val();
                val--;
                if(val<0) {
                    val=0;
                    alert('已经不能再减少了')
                }
                // 重新赋值
                $('#productNum').val(val);
            })

            $('#myDetail').on('tap','#add',function() {
                var val=parseInt($('#productNum').val());
                val++;
                if(val>kunum) {
                    val=kunum;
                    alert('已经不能再增加了');
                }
                $('#productNum').val(val);
            })

            /**
             * 1 点击尺码 当前高亮
             */


             $('#myDetail').on('tap','.detail-size span',function() {
                 $(this).addClass('active').siblings().removeClass('active');
                 selectSize=$(this).html();
             })


             /**
              * 加入购物车
              * 1 给购物车按钮绑定点击事件
              * 2 获取需要绑定的参数 尺码 id 选择的数量
              * 3 判断
              * 4 发送ajax请求
              */

              $('#myDetail').on('tap','#addCar',function() {
                  var selectNum=$('#productNum').val();
                  if(selectNum==-1) {
                      alert('请选择你需要的尺码');
                      return;
                  }

                  $.ajax({
                      url: '/cart/addCart',
                      type:'post',
                      data: {
                          productId: ids,
                          num: selectNum,
                          size: selectSize
                      },
                      success:function(res) {
                          if(res.success) {
                              setTimeout(function() {
                                  window.location.href='cart.html';
                              },2000);
                          }
                      }
                  })
              })
})